<template>
  <section>
    <el-row justify="center">
      <el-col :xs="12" :sm="12" :md="10" :lg="10">
        <el-space direction="vertical">
          <el-text class="mx-1" size="large" type="success" tag="b">{{ fwTitle }}</el-text>
          <el-text class="mx-1" size="large" type="info">{{info}}</el-text>
          <el-space>
            <el-tag type="warning" size="large" v-for="(item, index) in systeams" :key="index">{{item}}</el-tag>
          </el-space>
        </el-space>
      </el-col>
    </el-row>
  </section>
  <el-divider border-style="double" />
  <el-row justify="center">
    <el-col :span="6" v-for="(item, index) in productList" :key="index">
      <TsCard v-if="index < productList.length">
        <template #cover><el-image style="height: 200px" :src="item.img" :fit="item.fit" /></template>
        <template #title><el-text class="mx-1" type="primary">{{item.name}}</el-text></template>
        <el-text class="mx-1" type="info">{{item.content}}</el-text>
        <template #footer><el-space><el-tag type="warning" size="large" v-for="(t, i) in item.tags" :key="i">{{t}}</el-tag></el-space></template>
      </TsCard>
    </el-col>
  </el-row>

</template>


<script lang="ts">
import { defineComponent } from 'vue'
import TsCard from '@/components/TsCard.vue'
import {userChoiceStore} from '@/stores/counter'

interface ProductItem{
  name:string;
  img:string;
  content:string;
  fit:string;
  tags:string[]
}

export default defineComponent({
    components:{TsCard},
    setup(){
      const productList: ProductItem[] = [{name:"零售商品系统", img:"/sys/pmgr.png", content:"web/微信小程序",fit:'contain',tags:['入库','售卖','盘点','库存周期BI','预测']},
      {name:"零售会员系统", img:"/sys/club.png", content:"web/微信小程序",fit:'fill',tags:['注册','等级','权益','留存/流失分析','触达']},
      {name:"零售小店系统", img:"/sys/xiaod.png", content:"web/微信小程序",fit:'fill',tags:['线上货柜','购物车','优惠券','订单/支付','销售分析']},
      {name:"零售财务系统", img:"/sys/caiwuxt.png", content:"web/微信小程序",fit:'fill',tags:['会计','报表','支付','开票','财务洞察']},
      {name:"数智生产系统", img:"/sys/mpr.png", content:"web/微信小程序",fit:'contain',tags:['制造','采购','条码','质量','维护','库存']},
      {name:"IoT平台", img:"/sys/iot.png", content:"后台系统",fit:'contain',tags:['摇摇车','娃娃机','工业设备','消防监控','可集成']}];
      return{
        fwTitle:"可交付系统",
        info:"如下展示我们目前擅长、可以交付、专业的数字化系统,这些系统可申请软著：",
        systeams:["零售商品系统","零售会员系统","零售小店系统","零售财务系统","全屋定制系统","数智生产系统","IoT平台"],
        productList
      }
    },
    beforeMount() {
      userChoiceStore().set("/product/build")
    }
})
</script>

<style lang="less">
.el-col {
  border-radius: 4px;
  margin-bottom: 1.5rem;
}
</style>